Skip to content

[GSoC] EPSS History(Chart+Table)#2328

Open
Samk1710 wants to merge 7 commits into
aboutcode-org:mainfrom
Samk1710:gsoc-epss-history
Open

[GSoC] EPSS History(Chart+Table)#2328
Samk1710 wants to merge 7 commits into
aboutcode-org:mainfrom
Samk1710:gsoc-epss-history

Conversation

@Samk1710

@Samk1710 Samk1710 commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Resolves

Tasks Done:

  • add Trend Line Chart for EPSS History Visualization (Billboard.js)
  • add History Table paginated over 30 dates per page

Test log excerpt:

Updating is_latest on existing V2 Advisory.
System check identified no issues (0 silenced).
.
----------------------------------------------------------------------
Ran 1 test in 0.440s

OK
Destroying test database for alias 'default'...

Billboard links:

Samk1710 added 5 commits June 2, 2026 01:40
Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>
Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>
Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>
Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>
Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>

Refactor css for tooltip

Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>
@Samk1710

Samk1710 commented Jun 7, 2026

Copy link
Copy Markdown
Contributor Author

Attached the following screenshots as reference:

image image

Note:

  • In this screenshot, my local postgres has EPSS scores imported from May 30th to June 7th. However, I intentionally skipped importing data for June 4th and June 5th to simulate an import failure or missing upstream data which was a concern in the community call. To address this, I made sure the chart functions as a discrete representation rather than drawing misleading, continuous trend lines as seen in the graph.

Samk1710 added 2 commits June 11, 2026 00:50
Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>
Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>
@pombredanne

Copy link
Copy Markdown
Member

@tdruez your input is welcomed on the choice of billboard.js (vs. libraries already in use in ScanCode.io?)

@tdruez

tdruez commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

@pombredanne We use billboard.js in SCIO as well.

@pombredanne pombredanne left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Samk1710 Thanks... you'll need to resolve merge conflicts. And here are a few things to review.

@@ -0,0 +1,58 @@
import json

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add the copyright and license header

Comment thread vulnerabilities/views.py
cves = {
alias_obj.alias
for alias_obj in advisory.aliases.all()
if alias_obj.alias.startswith("CVE-")

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this check on the prefix? Is there a better way?

Comment thread vulnerabilities/views.py
for alias_obj in advisory.aliases.all()
if alias_obj.alias.startswith("CVE-")
}
if advisory.advisory_id and advisory.advisory_id.startswith("CVE-"):

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why again the same check?

ref_obj = AdvisoryReference.objects.create(url=json_data[0]["references"][0]["url"])

for i, data in enumerate(json_data):
is_latest = i == 0

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure I get what this means: this would be true only on the 1st iteration, and is_latest seems to say the opposite?


advisory.references.add(ref_obj)

severity = data["severities"][0]

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could you instead iterate on severities? this would be cleaner IMHO.

const data = getHistoryData();
if (!data.length) return;

toggleDisplay(chartWrap);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is chartwrap? and tablewrap?

if (chartWrap.style.display === "none" || epssChartInstance) return;

const history = [];
const map = new Map(data.map(h => [new Date(h.published_at + "T00:00:00").setHours(0,0,0,0), h]));

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this variable contain? map feels a pretty non descriptive name.

const history = [];
const map = new Map(data.map(h => [new Date(h.published_at + "T00:00:00").setHours(0,0,0,0), h]));

const end = new Date(data[data.length - 1].published_at + "T00:00:00").setHours(0,0,0,0);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer that all these data handling and data preparation happen in Python and not here in the JS code.

@@ -0,0 +1,13 @@
about_resource: billboard-3.18.0.pkgd.min.js

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please also include the non-minified version... also the js is NOT part of the zip you list at all, but part of the npm at https://registry.npmjs.org/billboard.js/-/billboard.js-3.18.0.tgz instead. Please use that version, not some random thing fetched from a CDN.

Also where is d3 coming from in all this?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The minified JS bundles D3... Is this really a good thing?

  • Copyright (c) 2017 ~ present NAVER Corp.

  • billboard.js project is licensed under the MIT license

  • billboard.js, JavaScript chart library

  • https://naver.github.io/billboard.js/

  • @Version 3.18.0

  • All-in-one packaged file for ease use of 'billboard.js' with dependant d3.js modules & polyfills.

    • @types/d3-selection ^3.0.11
    • @types/d3-transition ^3.0.9
    • d3-axis ^3.0.0
    • d3-brush ^3.0.0
    • d3-drag ^3.0.0
    • d3-dsv ^3.0.1
    • d3-ease ^3.0.1
    • d3-hierarchy ^3.1.2
    • d3-interpolate ^3.0.1
    • d3-scale ^4.0.2
    • d3-selection ^3.0.0
    • d3-shape ^3.2.0
    • d3-time-format ^4.1.0
    • d3-transition ^3.0.1
    • d3-zoom ^3.0.0

Comment thread .gitignore

# editors
.vscode
*.code-workspace

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants